// Name:                      Comment
//
// Description:               Define style for comment
//
// Component:                 `.am-comment`
//
// Sub-objects:               `.am-comment-avatar`
//                            `.am-comment-main`
//                            `.am-comment-hd`
//                            `.am-comment-title`
//                            `.am-comment-meta`
//                            `.am-comment-author`
//                            `.am-comment-bd`
//
// Modifiers:                 `.am-comment-flip`
//                            `.am-comment-primary`
//                            `.am-comment-secondary`
//                            `.am-comment-success`
//                            `.am-comment-warning`
//                            `.am-comment-danger`
//
// =============================================================================

/* ==========================================================================
   Component: Comment
 ============================================================================ */

.@{ns}comment {
    .clearfix();
    .hook-comment;
}

.@{ns}comment-avatar {
    float: left;
    .square(@comment-avatar-size);
    border-radius: 50%;
    border: 1px solid transparent;
    @media @medium-up {
        .square(@comment-avatar-size * 1.5);
    }
    .hook-comment-avatar;
}

.@{ns}comment-main {
    position: relative;
    margin-left: @comment-main-margin;
    border: 1px solid @comment-border-color;
    border-radius: @global-radius;
    &:before, &:after {
        position: absolute;
        top: 10px;
        left: -8px;
        right: 100%;
        width: 0;
        height: 0;
        display: block;
        content: " ";
        border-color: transparent;
        border-style: solid solid outset;
        border-width: 8px 8px 8px 0;
        pointer-events: none;
    }
    &:before {
        border-right-color: @comment-border-color;
        z-index: 1;
    }
    &:after {
        border-right-color: @comment-hd-bg-color;
        margin-left: 1px;
        z-index: 2;
    }
    @media @medium-up {
        margin-left: @comment-main-margin-md-up;
    }
    .hook-comment-main;
}

.@{ns}comment-hd {
    background: @comment-hd-bg-color;
    border-bottom: 1px solid #eee;
    display: flex;
    .hook-comment-hd;
}

.@{ns}comment-title {
    margin: 0 0 @comment-title-margin-btm 0;
    font-size: @comment-title-font-size;
    line-height: @comment-title-line-height;
    .hook-comment-title;
}

.@{ns}comment-meta {
    flex: 1;
    padding: 10px 15px;
    font-size: @comment-meta-font-size;
    color: @comment-meta-color;
    line-height: @comment-meta-line-height;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    a {
        color: @comment-meta-color;
    }
    .hook-comment-meta;
}

.@{ns}comment-author {
    font-weight: bold;
    color: @comment-meta-color;
    .hook-comment-author;
}

.@{ns}comment-bd {
    padding: @comment-bd-padding;
    overflow: hidden;
    &> :last-child {
        margin-bottom: 0;
    }
    .hook-comment-bd;
}

// comment footer
.@{ns}comment-footer {
    padding: 0 @comment-bd-padding 5px;
    .@{ns}comment-actions {
        a+a {
            margin-left: 5px;
        }
    }
    .hook-comment-footer;
}

// comment actions: in header or footer
.@{ns}comment-actions {
    font-size: @comment-meta-font-size;
    color: @comment-meta-color;
    a {
        display: inline-block;
        padding: 10px 5px;
        line-height: 1;
        color: @comment-meta-color;
        opacity: .7;
        &:hover {
            color: @global-primary;
            opacity: 1;
        }
    }
    .@{ns}comment-hd & {
        padding-right: .5rem;
    }
    .hook-comment-actions;
}

// Modifiers
// ========================================================================
.@{ns}comment-flip {
    .@{ns}comment-avatar {
        float: right;
    }
    .@{ns}comment-main {
        margin-left: auto;
        margin-right: @comment-main-margin;
        @media @medium-up {
            margin-right: @comment-main-margin-md-up;
        }
        &:before, &:after {
            left: auto;
            right: -8px;
            border-width: 8px 0 8px 8px;
        }
        &:before {
            border-left-color: @comment-border-color;
        }
        &:after {
            border-left-color: @comment-hd-bg-color;
            margin-right: 1px;
            margin-left: auto;
        }
    }
}

// Highlight mixin
// =============================================================================
.comment-highlight-variant(@border-color: @global-primary) {
    .@{ns}comment-avatar {
        border-color: @border-color;
    }
    .@{ns}comment-main {
        border-color: @border-color;
        &:before {
            border-right-color: @border-color;
        }
    }
    // Highlight and flip
    &.@{ns}comment-flip .@{ns}comment-main {
        &:before {
            border-left-color: @border-color;
            border-right-color: transparent;
        }
        &:after {
            border-left-color: @comment-hd-bg-color;
        }
    }
}

.@{ns}comment-primary {
    .comment-highlight-variant(@global-primary);
    .hook-comment-primary;
}

.@{ns}comment-secondary, .@{ns}comment-highlight {
    .comment-highlight-variant(@comment-hl-border-color);
    .hook-comment-secondary;
}

.@{ns}comment-success {
    .comment-highlight-variant(@global-success);
    .hook-comment-success;
}

.@{ns}comment-warning {
    .comment-highlight-variant(@global-warning);
    .hook-comment-warning;
}

.@{ns}comment-danger {
    .comment-highlight-variant(@global-danger);
    .hook-comment-danger;
}

// Comments list
// =============================================================================
.@{ns}comments-list {
    padding: 0;
    list-style: none;
}

.@{ns}comments-list .@{ns}comment {
    margin: @comment-list-margin-top 0 0 0;
    list-style: none;
}

@media @medium-up {
    .@{ns}comments-list-flip {
        .@{ns}comment-main {
            margin-right: 64px;
        }
        .@{ns}comment-flip .@{ns}comment-main {
            margin-left: 64px;
        }
    }
}

// Hooks
// =============================================================================
.hook-comment() {}

.hook-comment-avatar() {}

.hook-comment-main() {}

.hook-comment-hd() {}

.hook-comment-title() {}

.hook-comment-meta() {}

.hook-comment-author() {}

.hook-comment-bd() {}

.hook-comment-footer() {}

.hook-comment-actions() {}

.hook-comment-primary() {}

.hook-comment-secondary() {}

.hook-comment-success() {}

.hook-comment-warning() {}

.hook-comment-danger() {}
